<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script
	src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script type="text/javascript" language="javascript">
	function changeColor() {
		var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
		color = color.split("|");
		document.getElementById("blink").style.color = color[parseInt(Math
				.random()
				* color.length)];
	}
	setInterval("changeColor()", 200);
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".main_1").show();
		$(".main_2").hide();
		$(".main_3").hide();
		$("#1").click(function() {
			$(".main_1").show();
			$(".main_2").hide();
			$(".main_2").hide();
		});
		$("#2").click(function() {
			$(".main_2").show();
			$(".main_1").hide();
			$(".main_3").hide();
		});
		$("#3").click(function() {
			$(".main_3").show();
			$(".main_1").hide();
			$(".main_2").hide();
		});

	});
</script>
<style type="text/css">
body, html {
	font-family: "microsoft yahei"
}

.main_1 {
	width: 971px;
	zoom: 1;
	margin: 100px auto;
}

.main_2 {
	width: 971px;
	zoom: 1;
	margin: 100px auto;
}

.main_3 {
	width: 971px;
	zoom: 1;
	margin: 100px auto;
}

.main h2 {
	text-align: center;
	font-size: 28px;
	color: #666;
	text-align: center;
}

.page_btn {
	padding-top: 40px;
	text-align: center;
}

.page_btn a {
	cursor: pointer;
	padding: 10px 17px;
	border: solid 1px #dbdbdb;
	font-size: 14px;
}

.num {
	padding: 0 10px;
}

.page_btn a:hover, .page-item:hover {
	color: #fff;
	background: #e84c3d;
	border: 1px solid #e84c3d;
}

.page-item {
	padding: 10px 17px;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid #dbdbdb;
	color: #666666;
	margin: 0 3px;
	font-size: 14px;
	cursor: pointer;
}

.page-item.current {
	color: #fff;
	background: #e84c3d;
	cursor: pointer;
	border: 1px solid #e84c3d;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
	table-layout: fixed;
	word-break: break-all;
}

.table-integral thead {
	background: #f7f7f7;
	height: 35px;
	text-align: center;
	line-height: 35px;
	font-size: 14px;
	color: #333;
}

.table-integral td {
	border: 1px solid #e5e5e5;
	border-collapse: collapse;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table-integral tbody {
	height: 45px;
	line-height: 45px;
	font-size: 14px;
	color: #666;
	text-align: center;
	line-height: 45px;
}

.table-integral td {
	border: 1px solid #e5e5e5;
	border-collapse: collapse;
}

.text-green {
	color: #00a65a !important;
}

.text-red {
	color: #dd4b39 !important;
}

.table-integral td a, .table-integral td a:hover, .table-integral td a:active,
	.table-integral td a:visited, .table-integral td a:focus {
	color: #0099cc;
	cursor: pointer;
	text-decoration: none;
}

.tips_info {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
	font-size: 18px;
	color: #fff;
	text-align: center;
	line-height: 60px;
	display: none;
	padding: 0 30px;
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-width: 250px;
	height: 60px;
}

#fenye {
	margin-left: 200px;
}

#fenye button:hover {
	background-color: #3F7F7F;
}

#fenye  button {
	width: 60px;
	height: 40px;
}

#operation {
	position: relative;
	top: 100px;
	margin-left: 305px;
}

#operation a {
	font-size: 20px;
}

#operation button {
	border: 1px solid #d2a000;
	box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px
		#fedd71 inset;
	background: -webkit-linear-gradient(top, #fece34, #d8a605);
	background: -moz-linear-gradient(top, #fece34, #d8a605);
	background: linear-gradient(top, #fece34, #d8a605);
}

.grxx {
	color: red;
}
</style>
<script type="text/javascript">
	//全选
/* 	function selectAll(obj) {
		for (var i = 0; i < obj.elements.length; i++)
			if (obj.elements[i].type == "checkbox")
				obj.elements[i].checked = true;
	} */
	//反选
	function selectOther(obj) {
		for (var i = 0; i < obj.elements.length; i++)
			if (obj.elements[i].type == "checkbox") {
				if (!obj.elements[i].checked)
					obj.elements[i].checked = true;
				else
					obj.elements[i].checked = false;

			}
	}
	//取消全部
	function clearAll(obj) {
		for (var i = 0; i < obj.elements.length; i++)
			if (obj.elements[i].type == "checkbox")
				obj.elements[i].checked = false;
	}
</script>



<script type="text/javascript">
	        $(function() {
		$('.exit').click(function() {
			location.replace();
		});

		//批量删除
		$('#batchDeletes').click(function(){
		//function deleteAll(){
			//判断至少写了一项
			var checkedNum = $("input[name='subcheck']:checked").length;
			if (checkedNum == 0) {
				alert("请至少选择一项!");
				return false;
			}
			alert(checkedNum);
			if (confirm("确定删除"+checkedNum+"项文章?")) {
				var checkedList = new Array();
				$("input[name='subcheck']:checked").each(function() {
					
					checkedList.push($(this).val());
					console.log($(this).val());
					$.post('deleteItemId', {
						"a_id" : $(this).val()
					}, function(resp) {
						if (resp) {
							checkedNum = checkedNum - 1;
							if (checkedNum == 0) {
								alert('删除成功！');
								location.href='about';
							}
						}
					});
					
				})
			}
		})
		
		deleteAll
		//批量删除
		$('#deleteAll').click(function(){
		//function deleteAll(){
			//判断至少写了一项
			var checkedNum = $("input[name='subcheck']:checked").length;
			if (checkedNum == 0) {
				alert("请至少选择一项!");
				return false;
			}
			alert(checkedNum);
			if (confirm("确定删除"+checkedNum+"项文章?")) {
				var checkedList = new Array();
				$("input[name='subcheck']:checked").each(function() {
					
					checkedList.push($(this).val());
					console.log($(this).val());
					$.post('deleteItemId', {
						"a_id" : $(this).val()
					}, function(resp) {
						if (resp) {
							checkedNum = checkedNum - 1;
							if (checkedNum == 0) {
								alert('删除成功！');
								location.href='about';
							}
						}
					});
					
				})
			}
		})
		
		
		//批量还原
		$('#MassReduction').click(function() {
			//判断至少写了一项
			var checkedNum = $("input[name='subcheck']:checked").length;
			if (checkedNum == 0) {
				alert("请至少选择一项!");
				return false;
			}
			
			if (confirm("确定还原"+checkedNum+"项文章?")) {
				var checkedList = new Array();
				$("input[name='subcheck']:checked").each(function() {
					
					checkedList.push($(this).val());
					console.log($(this).val());
					$.post('reductionItemId', {
						"a_id" : $(this).val()
					}, function(resp) {
						if (resp) {
							checkedNum = checkedNum - 1;
							if (checkedNum == 0) {
								alert('还原成功！');
								location.href='about';
							}
						}
					});
					
				})
			}
		})
		
		
		
			//批量发布
		$('#BatchRelease').click(function() {
			//判断至少写了一项
			var checkedNum = $("input[name='subcheck']:checked").length;
			if (checkedNum == 0) {
				alert("请至少选择一项!");
				return false;
			}
			
			if (confirm("确定发布"+checkedNum+"项文章?")) {
				var checkedList = new Array();
				$("input[name='subcheck']:checked").each(function() {
					
					checkedList.push($(this).val());
					console.log($(this).val());
					$.post('BatchReleaseId', {
						"a_id" : $(this).val()
					}, function(resp) {
						if (resp) {
							checkedNum = checkedNum - 1;
							if (checkedNum == 0) {
								alert('发布成功！');
								location.href='about';
							}
						}
					});
					
				})
			}
		});
		
		
	});
</script>
<style type="text/css">
#main_if1 {
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
	<div class="header">
		<div class="menu-btn">
			<div class="menu"></div>
		</div>
		<h1 class="logo">
			<a href="index.jsp"> <span>MYBLOG</span> <img src="img/logo.png">
			</a>
		</h1>
		<div class="nav">
			<a href="index">文章</a> <a href="leacots">留言</a>
			<a href="album">相册</a> <a href="about" class="active">我的文章</a>
		</div>
		<ul class="layui-nav header-down-nav">
			<li class="layui-nav-item"><a href="index">文章</a></li>
			<li class="layui-nav-item"><a href="leacots">留言</a></li>
			<li class="layui-nav-item"><a href="album">个人信息</a></li>
			<li class="layui-nav-item"><a href="about" class="active">我的文章</a></li>
			<li class="layui-nav-item"><a href="about">文章详情</a></li>
		</ul>
		<div id="blink">
			<p class="welcome-text">
				欢迎<span class="name" style="color: red; font-size: 30px;"><a
					href="album" class="grxx">&nbsp;${user.u_name }&nbsp;</a></span>来到Myblog~
				<a href="#" class="help">帮助</a> <a href="outLogin"
					onClick="return confirm('确定退出吗?');" class="exit">退 出</a>
			</p>
		</div>

	</div>




	<!-- 显示我的发布文章 -->
	<form  name="check" method="post">
		<div id="operation" class="operation">
			<button type="button" class="btn btn-default">
				<a href="AddArticle">发布文章</a>
			</button>
			<button type="button" class="btn btn-default">
				<a id="1">已发布文章</a>
			</button>
			<button type="button" class="btn btn-default">
				<a id="2">已删除文章</a>
			</button>
			<button type="button" class="btn btn-default">
				<a id="3">未发布文章</a>
			</button>

		</div>


		<div class="main_1">
			<div id="ckAll"
				style="position: absolute; margin-left: 725px; margin-top: -24px;">

				<input type="button" value="全选"
					onclick="selectOther(document.check)" /> <input type="button"
					value="全部取消" onclick="clearAll(document.check)" />
				<!-- 删除多项文章最多一次删除五项 -->
				<button type="button" id="batchDeletes" onclick="deleteAll()">删除选中项</button>
			</div>
			<table class="table-integral">
				<thead>
					<tr>
						<td style="width: 100px;">*</td>
						<td style="width: 100px;">文章ID</td>
						<td style="width: 300px;">文章标题</td>
						<td style="width: 200px;">阅读人数</td>
						<td style="width: 145px;">点赞数</td>
						<td style="width: 250px;">发布时间</td>
						<td style="width: 140px;">操作</td>
					</tr>
				</thead>
				<tbody id="content_page">
					<c:forEach items="${ArticleContent.list}" var="article"
						varStatus="idx">
						<tr>

							<td><input type="checkbox" id="subcheck" name="subcheck"
								value="${article.a_id}" /></td>
							<td><div>${article.a_id}</div></td>
							<td><div>${article.a_name}</div></td>
							<td>${article.a_pageview}</td>
							<td class="text-green">${article.a_love}</td>
							<td><fmt:formatDate value="${article.a_postTime}" /></td>
							<td>
								<button type="button">
									<!-- 删除当前项 -->
									<a href="deleteItemById?a_id=${article.a_id}"
										onClick="return confirm('确定删除?');">删 除 </a>
								</button>
								<button type="button">
									<!-- 查看当前项文章 -->
									<a href="details?a_id=${article.a_id }">查 看</a>
								</button>
							</td>

						</tr>
					</c:forEach>

				</tbody>

			</table>


			<br>
			<div id="fenye">


				<button id="sy" data-ggh="${ArticleContent.pageNum}">首页</button>
				<button id="syy" data-ggh="${ArticleContent.pageNum}">上一页</button>
				<button id="xy" data-ggh="${ArticleContent.pageNum}">下一页</button>
				<button id="wy" data-ggh="${ArticleContent.pageNum}"
					data-ddd="${ArticleContent.totalPage}">尾页</button>

				<label>当前数据库中共有${ArticleContent.totalPage}页</label> <label>到第</label>
				<input id="randompage" type="text" name="dd" style="width: 40px;" />页
				<input type="button" value="跳转" id="tz" /> <label>当前是第${ArticleContent.pageNum}页</label>

			</div>

			<div id="wrap" class="page_btn clear"></div>
		</div>
	</form>

	<!--main-->




	<!--显示我的删除文章-->
	<div class="main_2">
		<div id="ckAll"
			style="position: absolute; margin-left: 725px; margin-top: -24px;">
			<input type="button" value="全选"
				onclick="selectOther(document.check1)" /> <input type="button"
				value="全部取消" onclick="clearAll(document.check1)" />
			<button type="button" id="MassReduction">
				<!-- 还原多项文章 一次还原五项 -->
				还原选中项
			</button>
		</div>
		<form action="SelectPersonalDeleted" name="check1" method="post">

			<table class="table-integral">
				<thead>
					<tr>
						<td style="width: 100px;">*</td>
						<td style="width: 100px;">文章ID</td>
						<td style="width: 300px;">文章标题</td>
						<td style="width: 200px;">阅读人数</td>
						<td style="width: 145px;">点赞数</td>
						<td style="width: 250px;">发布时间</td>
						<td style="width: 140px;">操作</td>
					</tr>
				</thead>
				<tbody id="content_page">
					<c:forEach items="${ArticleDelete}" var="article" varStatus="idx">
						<tr>
							<td><input type="checkbox" id="subcheck" name="subcheck"
								value="${article.a_id}" /></td>
							<td><div>${article.a_id}</div></td>
							<td><div>${article.a_name}</div></td>
							<td>${article.a_pageview}</td>
							<td class="text-green">${article.a_love}</td>
							<td><fmt:formatDate value="${article.a_postTime}" /></td>
							<td>
								<button type="button">
									<!-- 查看当前项文章 -->
									<a href="details?a_id=${article.a_id }">查 看</a>
								</button>
								<button type="button">
									<!-- 还原当前项 -->
									<a href="reduction?a_id=${article.a_id}"
										onClick="return confirm('确定还原吗?');">还原</a>
								</button>
							</td>

						</tr>
					</c:forEach>

				</tbody>
			</table>


		</form>

	</div>




	<!--显示我的未发布文章-->
	<div class="main_3">
		<div id="ckAll"
			style="position: absolute; margin-left: 725px; margin-top: -24px;">
			<input type="button" value="全选"
				onclick="selectOther(document.check2)" /> <input type="button"
				value="全部取消" onclick="clearAll(document.check2)" />
			<button type="button" id="deleteAll">
				<!-- 删除多项文章 一次发布五项 -->
				删除选中项
			</button>

			<button type="button" id="BatchRelease">
				<!-- 发布多项文章 一次发布五项 -->
				发布选中项
			</button>
		</div>
		<form action="getItemById" name="check2" method="post">

			<table class="table-integral">
				<thead>
					<tr>
						<td style="width: 100px;">*</td>
						<td style="width: 100px;">文章ID</td>
						<td style="width: 300px;">文章标题</td>
						<td style="width: 200px;">阅读人数</td>
						<td style="width: 145px;">点赞数</td>
						<td style="width: 250px;">发布时间</td>
						<td style="width: 140px;">操作</td>
					</tr>
				</thead>
				<tbody id="content_page">
					<c:forEach items="${ArticleNotRelease}" var="article"
						varStatus="idx">
						<tr>
							<td><input type="checkbox" id="subcheck" name="subcheck"
								value="${article.a_id}" /></td>
							<td><div>${article.a_id}</div></td>
							<td><div>${article.a_name}</div></td>
							<td>${article.a_pageview}</td>
							<td class="text-green">${article.a_love}</td>
							<td><fmt:formatDate value="${article.a_postTime}" /></td>
							<td>
								<button type="button">
									<!-- 删除当前项文章 -->
									<a href="deleteItemById?a_id=${article.a_id}"
										onClick="return confirm('确定删除?');">删 除 </a>
								</button>
								<button type="button">
									<!-- 发布当前文章 -->
									<a href="reduction?a_id=${article.a_id}"
										onClick="return confirm('发布成功！');">发 布</a>
								</button>
							</td>

						</tr>
					</c:forEach>

				</tbody>
			</table>

		</form>


		<div id="wrap" class="page_btn clear"></div>

	</div>


	<div id="info_modal" class="tips_info"></div>
	<div class="footer-wrap">
		<div class="footer w1000">
			<div class="qrcode">
				<img src="img/erweima.jpg">
			</div>
			<div class="practice-mode">
				<img src="img/down_img.jpg">
				<div class="text">
					<h4 class="title">我的联系方式</h4>
					<p>
						微信<span class="WeChat">1234567890</span>
					</p>
					<p>
						手机<span class="iphone">1234567890</span>
					</p>
					<p>
						邮箱<span class="email">1234567890@qq.com</span>
					</p>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		layui.config({
			base : 'js/util/'
		}).use(
				[ 'element', 'laypage', 'form', 'layer', 'menu' ],
				function() {
					element = layui.element, laypage = layui.laypage,
							form = layui.form, layer = layui.layer,
							menu = layui.menu;
					menu.init();
				})
	</script>
	<script type="text/javascript">
		$(function() {
				$('#xy').click(function() {
				
				var ye = $('#sy').attr('data-ggh');
				var yy = $('#wy').attr('data-ddd');
				alert(ye);
				alert(yy);
				alert(++ye)
				var num=++ye;
				if (ye == yy) {
					location.href = "about?pageNum=" + yy;
					return;
				}else{
					alert('DS');
					location.href = "about?pageNum=" + num;
					alert(num)
				}
				
			})
			$('#tz').click(function() {
				
				var ye = $('#randompage').val();
				var yy = $('#wy').attr('data-ddd');
				if (ye >= yy) {
					location.href = "about?pageNum=" + yy;
				}
				location.href = "about?pageNum=" + ye;
			})
			$('#sy').click(function() {
				location.href = "about?pageNum=" + 1;
			})
			$('#syy').click(function() {
				
				var ye = $('#sy').attr('data-ggh');
				if (ye <= 1) {
					location.href = "about?pageNum=" + 1;
				}
				location.href = "about?pageNum=" + (--ye);
			})
			
			$('#wy').click(function() {
				var yy = $('#wy').attr('data-ddd');
				location.href = "about?pageNum=" + yy;
			})
		})
	</script>

</body>
</html>